<template>
  <div>
    <Row style="margin-top: 20px;">
      <Card shadow v-if='showRealTime'>
        <RealTime/>
      </Card>
      <Card shadow v-if='showHistory'>
        <HistoryPage/>
      </Card>
      <Card shadow v-if='showStatistics'>
        <DataStatistics/>
      </Card>
      <Card shadow v-if='showVideo'>
        <VideoMonitor/>
      </Card>
      <Card shadow v-if='showDataInterface'>
        <DataInterface/>
      </Card>
    </Row>
  </div>
</template>
<script>
import RealTime from '../detail-page/realTime.vue'
import HistoryPage from '../detail-page/historyPage.vue'
import DataStatistics from '../detail-page/dataStatistics.vue'
import VideoMonitor from '../detail-page/videoMonitor.vue'
import DataInterface from '../detail-page/dataInterface.vue'
export default {
  name: 'weatherStation1',
  components: {
    RealTime,
    HistoryPage,
    DataStatistics,
    VideoMonitor,
    DataInterface
  },
  data () {
    return {
      showRealTime: true,
      showHistory: false,
      showStatistics: false,
      showVideo: false,
      showDataInterface: false
    }
  },
  watch: {
    '$store.state.pageId': function () {
      var pageId = this.$store.state.pageId
      this.changePageId(pageId)
    }
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log(to)
    console.log(from)
  },
  mounted () {
    // console.log(this.$route.path)
    // console.log(this.$store.state.pageId)
    var pageId = this.$store.state.pageId
    this.changePageId(pageId)
  },
  methods: {
    changePageId (pageId) {
      this.$nextTick(() => {
        this.showRealTime = false
        this.showHistory = false
        this.showStatistics = false
        this.showVideo = false
        this.showDataInterface = false
        if (pageId == '1') {
          this.showRealTime = true
        } else if (pageId == '2') {
          this.showHistory = true
        } else if (pageId == '3') {
          this.showStatistics = true
        } else if (pageId == '4') {
          this.showVideo = true
        } else {
          this.showDataInterface = true
        }
      })
    }
  }
}
</script>
